
function _GenTableRowElement(data) {
    let _out = `<tr new>
    <td>${data.DBCount}</td>
    <td>${data.TableCount}</td>
    <td>${data.RecordCount}</td>
    <td>${data.DataSizeInBytes / 1024}</td>
    <td>${data.st}</td>
    <td>${data.et}</td>
    <td>${data.et - data.st}</td>
    <td>${data.requested}</td>
    <td>${data.SumInBytes}</td>
    <td>${(data.et - data.st) / data.requested}</td>
</tr>`;
    _T.innerHTML = _out;
    return _T.firstElementChild.firstElementChild;
}
function _GenTableHTML() {
    let _out = `<table id='myTable'>
    <colgroup>
        <col span="4" class="normal">
        <col span="3" class="batman">
        <col span="2" class="flash">
    </colgroup>
    <thead>
        <tr>
            <th>DBs</th>
            <th>tables</th>
            <th>records</th>
            <th>size(KiB)/record</th>
            <th>start time</th>
            <th>end time</th>
            <th>duration(ms)</th>
            <th>requested</th>
            <th>size(KiB)</th>
            <th>AVG.(ms)</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>`;
    _D.innerHTML = _out;
    return _D.firstElementChild;
}
const _outputElem = document.body.querySelector('#output');
const _D = document.createElement('div');
const _T = document.createElement('table');
const _infoElem = document.body.querySelector('#info');

export function PrintHead() {
    _outputElem.append(_GenTableHTML());
}
export function Print(data) {
    const _tBody = _outputElem.querySelector('tbody');
    const _re = _GenTableRowElement(data);
    _tBody.append(_re);
    setTimeout(_ => {
        _re.removeAttribute('new');
    }, 200);

}

export function Clear() {
    const _tBody = _outputElem.querySelector('tbody');
    _tBody.replaceChildren();
}

export function PrintMsg(msg) {
    _infoElem.innerText = msg;
}
